<template>
    <div style="width: 100%;width: 100%;" v-loading="loading">
        <GameList v-if="loadSuccess" style="width: 100%;height: 250px;" :gamelist="gamelist" :mode="1" 
        :OnEdit="OnEdit" 
        :OnDelete="OnDelete"
        :OnSelectionChanged="OnSelectionChanged" />
        <div v-else>加载失败</div>
    </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import GameList from '@/components/GameList.vue';
import router from '@/router'
import axios from 'axios'
let gamelist = reactive([]);
let loading=ref(true);
let loadSuccess=ref(true);

onMounted(function(){
    axios.get('http://127.0.0.1:8080/gamelist')
    .then(function(response){
        Object.assign(gamelist,response.data);
    }).catch(function(err){
        loadSuccess.value=false;
    }).finally(function(){
        loading.value=false;
    });
});


function OnEdit(index, row) {
    //进入编辑页面
    router.replace(`/admin/editor/${row.id}`);
}
function OnDelete(index, row) {
    gamelist.splice(index, 1);
    //向服务器发送删除指令
}
function OnSelectionChanged(selectedList) {

}
</script>